<template>
    <div class="barbear">
        <div class="oneline">
            <div class="imgs">
                <nuxt-link :to="`/community/expert/detail/${item.createUserId}`" target='_blank'>
                    <el-image
                        style="width: 130px; height: 130px"
                        :src="`${file}${item.fileShowUrl}?x-oss-process=image/resize,w_${130}`"
                        :lazy="true"
                        fit="contain">
                    </el-image>
                    <!-- <img class="money-img" :src="file + item.fileShowUrl" alt=""> -->
                </nuxt-link>
            </div>
            <div class="content-box">
                <div class="title">
                    <nuxt-link :to="`/community/expert/detail/${item.createUserId}`">
                        <span class="expertname">{{item.expertName}}</span>
                    </nuxt-link>
                    <span class="address" v-if="item.city !== ''">{{item.city[0].label}}</span>
                </div>
                <div class="adviser">
                    {{item.jobDescription}}
                </div>
                <div class="designer">
                    {{FILTER_FORMATER.wordNum(item.expertServiceName,25)}}
                </div>
            </div>
        </div>
        <div class="moneys">
            {{tofloat(item.fixedPrice)}}
        </div>
        <div class="flex fans">
            <div><span>服务数量 </span><span class="nums"> {{item.serviceNum}}</span></div>
            <div class="score">
                <span class="ping">评</span><span class="num">{{item.totalScore}}</span>
            </div>
            <div class="chat" @click="onlineService">
                聊天
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'nuxt-property-decorator'
import {open53Server} from '~/method'
@Component({})
export default class ExpertList extends Vue {
    @Prop()
    item!: any
    file:string = this.$store.state.basefile
    tofloat (val:any) {
        const num = parseFloat(val)
        let number = ''
        if (num < 10000) {
            number = (num / 1).toFixed(2) + '元'
        } else if (val === '') {
            number = '商议'
        } else {
            number = (num / 10000).toFixed(2) + '万元'
        }
        return number
    }
    onlineService () {
        open53Server('6ea5ef686e1e3682688ddc64d3c13328', '1')
    }
}
</script>

<style lang="scss" scoped>
    .barbear{
        color: black;
        padding: 25px;
        border-top: 1px solid #fff;
        background-color: #fff;
        height: 245px;
        .content-box{
            flex: 1;
        }
        .moneys{
            height: 44px;
            line-height: 44px;
            font-size: 22px;
            color: #ff5a5a;
        }
        .fans{
            color: #9a9494;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            position: relative;
            .nums{
                color: #47b5eb;
                font-size: 14px;
            }
            .chat{
                position: absolute;
                width: 74px;
                height: 36px;
                color: #fff;
                background-color: #47b5eb;
                border-radius: 4px;
                line-height: 36px;
                text-align: center;
                cursor: pointer;
                right: 0;
                bottom: 5px;
            }
            .score{
                margin-left: 20px;
                .ping{
                    margin-left: 5px;
                    background-color: #ffefdb;
                    color: #f5c697;
                    text-align: center;
                    border-radius: 2px;
                    border: 1px solid #ffad4d;
                    height: 20px;
                    line-height: 10px;
                    font-size: 10px;
                    padding: 5px;
                }
                .num{
                    width: 32px;
                    color: #f5c697;
                    text-align: center;
                    border-radius: 2px;
                    border: 1px solid #ffad4d;
                    border-left-width: 0;
                    height: 20px;
                    line-height: 20px;
                }
                span{
                    display: inline-block;
                    vertical-align: middle;
                }
            }
        }
        .adviser{
            color: #bcbcbc;
            font-size: 14px;
            margin-bottom: 20px;
            height: 24px;
            line-height: 24px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }
        .designer{
            font-size: 14px;
            line-height: 21px;
            height: 40px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .title{
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            display: flex;
            justify-content: space-between;
            .expertname{
                color: black;
            }
            .address{
                font-size: 14px;
                color: #999999;
            }
        }
        .oneline{
            display: flex;
            .imgs{
                width: 130px;
                height: 130px;
                margin-right: 20px;
            }
            .money-img{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>
